<template>
  <el-drawer
    title="代码值"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDrawer"
    custom-class="tag-drawer"
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <tag-content-header refresh setting @toolFun="toolFun" :settingData="columns">
          <template #title>
            <span>代码值列表</span>
          </template>
          <template #toolsPre>
            <el-tooltip effect="dark" content="编辑全局阈值" placement="top" :enterable="false">
              <el-button
                type="primary"
                plain
                circle
                icon="el-icon-stopwatch"
                @click.native="handleGlobalEditClick"
              ></el-button>
            </el-tooltip>
          </template>
        </tag-content-header>
        <tag-table
          ref="table"
          @refresh="getList"
          :data="dataList"
          :loading="loading"
          :columns="columns"
          :params="params"
          :total="totalSize"
        >
          <template #operation="{ scope }">
            <div class="operation-button-box">
              <el-tooltip effect="dark" content="编辑阈值" placement="top" :enterable="false">
                <icon-svg name="iconEdit" class="svg-edit" @click.native="handleItemThresClick(scope.row)"></icon-svg>
              </el-tooltip>
            </div>
          </template>
        </tag-table>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDrawer">关闭</el-button>
    </div>
    <code-alarm-dialog ref="codeAlarmDialog" @callback="getList"></code-alarm-dialog>
  </el-drawer>
</template>
<script>
import $monitor from './api'
import codeAlarmDialog from './code-alarm-dialog'
export default {
  name: 'AlarmCodeDetailList',
  components: {
    codeAlarmDialog
  },
  data() {
    return {
      drawerVisible: false,
      tagId: '',
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '指标名称',
          prop: 'tagNm',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '代码值',
          prop: 'codeCd',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '代码描述',
          prop: 'codeDesc',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '阈值',
          prop: 'alarmThreshold',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 120
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: { tagId: '' },
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    showDrawer(tagId) {
      this.tagId = tagId
      this.getList()
      this.drawerVisible = true
    },
    getList() {
      this.loading = true
      this.params.queryParams.tagId = this.tagId
      $monitor
        .codeDetailList(this.params)
        .then(({ data }) => {
          if (data && data.code === '0') {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          } else {
            this.message.error(data.data || data.msg)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    toolFun(operation) {
      switch (operation) {
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    clearDrawer() {
      this.tagId = ''
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: { tagId: '' },
        descPriority: false
      }
      this.drawerVisible = false
    },
    handleItemThresClick(row) {
      // 跳转到查看代码值页面
      this.$refs.codeAlarmDialog.showDialog(row)
    },
    handleGlobalEditClick() {
      this.$refs.codeAlarmDialog.showDialog()
    }
  }
}
</script>

<style lang="scss">
.alarm-code-detail-list {
  position: relative;
}
</style>
